<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>Board Data</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <!-- 主拖拽区 -->
        <div v-if="mainData.length">
          <grid-layout
            :layout="mainData"
            :col-num="12"
            :row-height="layoutConfig.height"
            :is-draggable="layoutConfig.dialogVisible"
            :is-resizable="layoutConfig.dialogVisible"
            :is-mirrored="false"
            :vertical-compact="true"
            :preventCollision="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
            :autoSize="true"
          >
            <grid-item
              v-for="(item,index) in mainData"
              :x="item.x"
              :y="item.y"
              :w="item.w"
              :h="item.h"
              :i="item.i"
              :key="item.i"
              @resize="resizeEvent"
              @move="moveEvent"
              @resized="resizedEvent"
              @moved="movedEvent"
              :item="watchitem(item)"
            >
              <div class="body-line">
                <component :is="item.components" v-if="item.components" inPage="dataBoard" :keyData="item.keyData"
                           :componentsId="item.i" :sizeNumber="item.sizeNumber" :indexBox="index" :boardData="item.boardData"></component>
                <div class="icon-menu">
                  <el-dropdown trigger="click" @command="handleCommand($event, item.i)">
  <span class="el-dropdown-link"><i class="el-icon-menu"></i>
  </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="edit">
                        <i class="el-icon-edit-outline"></i>Edit
                      </el-dropdown-item>
                      <el-dropdown-item command="detele">
                        <i class="el-icon-delete"></i>Detele
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </grid-item>
          </grid-layout>
        </div>
        <div v-else class="data-not-line">
          No related components found
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button size="small" @click="closePOpup">cancel</el-button>
        <el-button size="small" type="primary" @click="addComponents()">Add Components</el-button>

      </div>
    </div>
    <editComponents :visible.sync="boardVisible" :detailId="detailId" @getInitPage="getInitPage"
                    :componentsId="componentsId" :mainData="mainData" :detailOption="detailOption"></editComponents>
  </div>
</template>

<script>
import {GridLayout, GridItem} from "vue-grid-layout";
import editComponents from "./editComponents";
import {panelDetail, panelEdit, panelComponentsList, panelComponentsRemove} from '@/api/system/board'

export default {
  props: ['visible', 'detailId'],
  name: "boxDetail",
  components: {
    GridLayout,
    GridItem,
    editComponents
  },
  data() {
    return {
      dialogVisible: false,
      boardVisible: false,
      layoutConfig: {
        height: 100, // 默认高度
        dialogVisible: true, // 是否可拖拽或改变大小
      },
      value: false,
      mainData: [],
      detailOption: null,
      componentsId: 0
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.getDetail()
        // this.getComponentsFn()
      } else {
        this.mainData = []
        this.detailOption = null
      }
    }
  },
  created() {
  },
  methods: {
    getDetail() {
      panelDetail(this.detailId).then(res => {
        let {data} = res
        this.detailOption = data
        this.getComponentsFn(data.position)
      })
    },
    getComponentsFn(position) {
      this.mainData = []
      panelComponentsList({panelId: this.detailId}).then(res => {
        let a_ = {}
        if (position) {
          let b_ = JSON.parse(position)
          for (let item of b_) {
            a_[item.i] = item
          }
        }
        for (let item of res.rows) {
          this.mainData.push({
            "x": a_[item.id].x, // 第几列
            "y": a_[item.id].y, // 第几行
            "w": a_[item.id].w, // 初始宽度，值为colWidth的倍数。
            "h": a_[item.id].h, // 初始高度，值为rowHeight的倍数。
            "i": item.id, // 栅格中元素的ID
            "components": item.number ? item.number.split('-')[1] : '', // 组件
            keyData: item.body ? JSON.parse(item.body) : [],
            boardData: JSON.stringify(item),
            sizeNumber: `${a_[item.id].x}-${a_[item.id].y}-${a_[item.id].w}-${a_[item.id].h}`
          })
        }
      })
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
    moveEvent: function (i, newX, newY, e) {
      // console.log('moveEvent')
      //console.log(e)
      //console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
    },
    resizeEvent: function (i, newH, newW) {
      // console.log('resizeEvent')
      // console.log("拉伸了 i=" + i + ", H=" + newH + ", W=" + newW);
      // console.log('this.mainData:', this.mainData)
      // this.getColListChange()
    },
    movedEvent: function (i, newX, newY, e) {
      // console.log('movedEvent')
      //console.log(e)
      // console.log("移动结束 i=" + i + ", X=" + newX + ", Y=" + newY);
      // console.log('this.mainData:', this.mainData)
      this.getColListChange()
    },
    resizedEvent: function (i, newH, newW, newHPx, newWPx) {
      // console.log('resizedEvent', i)
      this.changeDataFn(i)
      this.getColListChange()
      //console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
    },
    watchitem: function (item) {
      // let y_max=5
      // let x_max=6
      // if(item.y>y_max ||item.x>x_max){
      //     item.y=1
      //     item.x=1
      // }
      return item
    },
    changeDataFn(id) {
      for (let index in this.mainData) {
        let item = JSON.parse(JSON.stringify(this.mainData[index]))
        if (item.i === id) {
          // item.sizeNumber = `${item.x}-${item.y}-${item.w}-${item.h}`
          // this.$set(this.mainData, index, item)
          this.mainData[index].sizeNumber = `${item.x}-${item.y}-${item.w}-${item.h}`
        }
      }
    },
    // 每个格子变化了
    getColListChange(type, id) {
      let list_ = JSON.parse(JSON.stringify(this.mainData))
      if (type === 'detele') {
        let index_ = 'all'
        for (let index in list_) {
          let item = list_[index]
          if (item.i === id) {
            index_ = index
          }
        }
        list_.splice(index_, 1)
      }
      let data_ = {
        id: this.detailId,
        name: this.detailOption.name,
        description: this.detailOption.description,
        position: JSON.stringify(list_)
      }
      panelEdit(data_).then(res => {
        // console.log('res:', res)
        if (type === 'detele') {
          this.getDetail()
        }
      })
    },
    getInitPage() {
      this.mainData = []
      this.getDetail()
    },
    handleCommand(command, index) {
      // console.log('command:', command, index)
      // detele edit
      if (command === 'detele') {
        this.deleteFn(index)
      }
      if (command === 'edit') {
        this.componentsId = index
        this.boardVisible = true
      }
    },
    // delete
    deleteFn(id) {
      let that = this
      this.$modal.confirm('Are you sure to delete the data item for rule '+id+'？').then(function () {
        panelComponentsRemove(id).then(res => {
          if (res.code === 200) {
            that.getColListChange('detele', id)
          }
        });
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("success");
      }).catch(() => {
      });
    },
    addComponents() {
      this.componentsId = 0
      this.boardVisible = true
    }
  }
}
</script>

<style scoped>
.Json-list {
  border: 1px solid #eee;
  padding: 10px;
}

.Json-list-line {
  display: flex;
  align-items: center;
}

.w-150 {
  width: 150px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 95%;
  height: 95%;
  background: rgba(245, 246, 250, 1);
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
  background: #fff;

}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
  background: #fff;
}

.commentBody {
  /*padding: 10px;*/
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.vue-grid-item {
  background: #fff;
}

.icon-menu {
  position: absolute;
  right: 5px;
  top: 3px;
  color: #888;
}

.data-not-line {
  text-align: center;
  padding: 80px 0;
  color: #888;
}

.body-line {
  height: 100%;
  width: 100%;
}
</style>
